<template>
  <div class="w">
    <div class="travel_page">
      <TravelList @triggerSeach='triggerSeach' />
      <div class="bottomimg">
        <h2>推荐城市</h2>
        <img
          src="http://157.122.54.189:9093/images/pic_sea.jpeg"
          alt=""
        >
      </div>
    </div>
    <div class="travel_strategy">
      <!-- 搜索框开始 -->
      <div class="topinput">
        <el-input
          placeholder="请输入想去的地方，比如：'
        广州'"
          class="input-with-select"
          v-model="input"
        >
        </el-input>
        <span
          class="seach el-icon-search"
          @click="SeachPol"
        ></span>
      </div>
      <div class="tuijian">
        推荐：
        <span @click='triggerSeach("广州")'>广州</span>
        <span @click='triggerSeach("上海")'>上海</span>
        <span @click='triggerSeach("北京")'>北京</span>
      </div>
      <!-- 搜索框结束 -->
      <!-- 旅游攻略文章列表开始 -->
      <div class="travel_bottom">
        <div class="top_page">
          <h3>推荐攻略</h3>
          <div
            class="el-icon-edit xie"
            @click="$router.push('/post/strategy')"
          >写游记</div>
        </div>
        <div class="pagelist">
          <PageList :PageLists='PageLists' />
        </div>
        <!-- 旅游攻略文章列表结束 -->
        <!-- 分页功能开始 -->
        <div
          class="block"
          v-if="Biglist"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[3, 5, 7, 8]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Biglist.length || 0"
          >
          </el-pagination>
        </div>
        <!-- 分页功能结束 -->
      </div>
    </div>
  </div>
</template>

<script>
import { log } from "util";
export default {
  data() {
    return {
      //搜索框
      input: "",
      // 每页的列表长度  默认3
      pagesize: 3,
      //当前页码  默认1
      currentpage: 1,
      //筛选之后的列表
      PageLists: null,
      //总列表
      Biglist: null,
    };
  },
  // async created() {
  //   if (this.$route.query.city) {
  //     res = await this.$axios.get("/posts", {
  //       params: { city: this.$route.query.city },
  //     });
  //   }
  //   this.Biglist = res.data.data.map((e) => {
  //     if (e.images.length > 3) {
  //       e.images.length = 3;
  //     }
  //     return e;
  //   });
  // },
  watch: {
    //监听路由
    $route(old) {
      // 如果路由发生变化重新获取数据
      this.newaxios();
      this.input = this.$route.query.city;
    },
    //监听总数据 发生改变就重新筛选数据
    Biglist() {
      this.currentpage = 1;
      this.ListFilter();
    },
    //监听input  如果被清空就搜索全部数据
    input(newold) {
      if (newold == "") {
        this.$router.replace("/post");
      }
    },
  },

  //获取列表详情
  created() {
    if (this.$route.query.city) {
      this.input = this.$route.query.city;
    }
    this.newaxios();
  },
  methods: {
    //每页长度val
    handleSizeChange(val) {
      this.pagesize = val;
      //选择页长度之后页码重置为1
      this.currentpage = 1;
      //
      this.ListFilter();
    },
    //当前页面
    handleCurrentChange(val) {
      this.currentpage = val;
      this.ListFilter();
      document.documentElement.scrollTo(0, 0);
    },
    // 根据当前页和每页长度 筛选页面列表   总列表Biglist   筛选过后的列表PageLists
    ListFilter() {
      this.PageLists = this.Biglist.filter((v, index) => {
        //数据开始索引
        const start = (this.currentpage - 1) * this.pagesize;
        //数据结束索引
        const end = this.currentpage * this.pagesize;
        // console.log(index);
        //进行赛选
        if (index >= start && index < end) {
          return true;
        }
      });
    },
    //点击搜索
    SeachPol() {
      this.$router.replace({
        path: "/post",
        query: {
          city: this.input,
        },
      });
    },
    //点击其他相关按钮  触发搜索
    triggerSeach(val) {
      // console.log(val);
      this.input = val;
      this.SeachPol();
    },
    //封装获取数据的请求
    async newaxios() {
      //如果参数上有city就发送
      let res = "";
      if (this.$route.query.city) {
        res = await this.$axios.get("/posts", {
          params: { city: this.$route.query.city },
        });
      } else {
        res = await this.$axios.get("/posts");
      }
      //筛选图片  不能多余3个 赋值给PageLists
      this.Biglist = res.data.data.map((e) => {
        if (e.images.length > 3) {
          e.images.length = 3;
        }
        return e;
      });
      //筛选每页数据列表
      this.ListFilter();
      console.log(this.Biglist);
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .travel_page {
    width: 260px;
    h2 {
      font-size: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      font-weight: normal;
      margin-bottom: 20px;
    }
    img {
      width: 260px;
    }
  }
  .travel_strategy {
    flex: 1;
    padding-left: 40px;
    position: relative;
    .seach {
      position: absolute;
      top: 0;
      right: 0;
      padding: 9px 20px;
      font-size: 24px;
      color: orange;
      font-weight: 700;
      cursor: pointer;
    }
    .topinput {
      border: 4px solid #ffa500;
      /deep/.el-input__inner {
        padding-top: 7px;
        height: 30px;
        border: none;
        color: #333;
      }
      .input-with-select {
        height: 34px;
      }
    }
    .tuijian {
      padding: 10px 0;
      font-size: 12px;
      color: #666;
      span {
        padding: 3px;
        cursor: pointer;
        &:hover {
          color: orange;
          text-decoration: underline;
        }
      }
    }
    .travel_bottom {
      .top_page {
        height: 55px;
        display: flex;
        justify-content: space-between;
        h3 {
          height: 50px;
          line-height: 40px;
          border-bottom: 2px solid orange;
          font-weight: 400;
          font-size: 18px;
          color: orange;
        }
        .xie {
          cursor: pointer;
          height: 40px;
          color: #fff;
          background-color: #409eff;
          transition: 0.1s;
          font-weight: 500;
          padding: 12px 20px;
          font-size: 14px;
          border-radius: 4px;
          display: flex;
          align-items: center;
        }
      }
      .pagelist {
        border-top: 1px solid #ccc;
        padding-top: 20px;
      }
    }
  }
  // 分页组件
  .block {
    display: flex;
    justify-content: center;
    padding: 10px 0 20px;
  }
}
</style>